<template>
  <div class="register_bg flex_col">
    <label class="title_txt">注册</label>
    <div class="v_phone flex_row">
      <van-dropdown-menu class="flex1 ml-16" :overlay="false">
        <van-dropdown-item v-model="value"
                           :options="option" />
      </van-dropdown-menu>
      <div class="line_vertical"></div>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field class="flex4 pdt12"
                 v-model="tel"
                 type="tel"
                 placeholder="请输入手机号" />
    </div>
    <div class="v_pwd flex_row">
      <label class="flex1 pwd_txt mr-16">验证码</label>
      <div class="line_vertical"></div>
      <van-field class="flex2_5 pdt12"
                 v-model="password"
                 type="password"
                 placeholder="设置密码(6-18位字符)" />
      <div class="get_code flex1_5" @click="getCode">获取验证码</div>
    </div>
    <div class="v_pwd flex_row">
      <label class="flex1 pwd_txt mr-16">密码</label>
      <div class="line_vertical"></div>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field class="flex4 pdt12"
                 v-model="password"
                 type="password"
                 placeholder="设置密码(6-18位字符)" />
    </div>
    
    <div class="v_pwd flex_row">
      <label class="flex1_5 pwd_txt mr-16">确认密码</label>
      <div class="line_vertical"></div>
      <van-field class="flex4 pdt12"
                 v-model="againPwd"
                 type="password"
                 placeholder="请输入确认密码" />
    </div>
    
    <div class="v_pwd flex_row">
      <label class="flex1 pwd_txt">企业名称</label>
      <div class="line_vertical"></div>
      <van-dropdown-menu class="flex4 ml-16" :overlay="false">
        <van-dropdown-item v-model="companyVal"
                           :options="companyOpt" />
      </van-dropdown-menu>
    </div>
    <div class="flex_row">
      <button class="btnRegist"
            @click.prevent.stop="btnRegist">注册</button>
    </div>
    <div class="flex_row">
      <div class="flex1"></div>
      <div class="to_login" @click="toLogin">已有账号，去登录</div>
      <div class="flex1"></div>
    </div>
    <div class="flex_row protocol">
      <div class="flex1"></div>
      <div class="">◎我已阅读<label class="pr_txt" @click="protocolOne">《用户协议》</label>&<label class="pr_txt"  @click="protocolTwo">《隐私政策》</label></div>
      <div class="flex1"></div>
    </div>

  </div>
</template>

<script>
//导入组件
import Vue from 'vue';
import { DropdownMenu, DropdownItem, Field } from 'vant';

//注册组件
Vue.use(DropdownMenu).use(DropdownItem).use(Field);
export default {
  name: 'register',

  data () {
    return {
      value: 0,
      option: [
        { text: '+86', value: 0 },
        { text: '+87', value: 1 },
        { text: '+88', value: 2 },
      ],
      companyVal:0,
      companyOpt: [
        { text: '', value: 0 },
        { text: '阿里', value: 1 },
        { text: '腾讯', value: 2 },
        { text: '京东', value: 3 },
      ],
      tel: "",//手机
      password:"",//密码
      againPwd:"",//确认密码
      smsCode:""
    }
  },

  methods: {
    //注册
    btnRegist () {
    },

    //获取验证码
    getCode(){
    },

    //去登录
    toLogin(){
      this.$router.push({
        path: '/login'
      })
    },

    //用户协议
    protocolOne(){

    },

    //隐私协议
    protocolTwo(){

    }
  }
}

</script>

<style lang="less" scoped>
.register_bg {
  background: #ffffff;
  width: 100%;
  height: 100%;
}
.title_txt {
  font-size: 24px;
  color: #0F0D3A;
  margin-top: 14%;
  margin-left: 48px;
}
.v_phone {
  background: transparent;
  margin-top: 40px;
  margin-left: 48px;
  margin-right: 48px;
  border-bottom: 1px solid rgba(150, 146, 146, 0.3);
}
.get_code{
  color: #4980FF;
  font-size: 14px;
  line-height: 46px;
}
.v_pwd{
  background: transparent;
  margin-top: 20px;
  margin-left: 48px;
  margin-right: 48px;
  border-bottom: 1px solid rgba(150, 146, 146, 0.3);
}

.line_vertical {
  width: 1px;
  height: 10px;
  margin: 20px 0px 0px 10px;
  background: #333333;
}
.line_horizontal {
  width: 100%;
  height: 1px;
  background: #333333;
}
/deep/ .van-cell {
  background: transparent;
}
/deep/ .van-dropdown-menu__bar {
  background: transparent;
}
/deep/ .van-popup--top{
  left:120px;
  width: 60%;
}
/deep/.van-dropdown-menu__bar{
  box-shadow: none;
}
/deep/.van-dropdown-menu__title{
  width: 90%;
}
/deep/.van-dropdown-menu__title::after{
  border-color:transparent transparent #000000 #000000
}
.pwd_txt{
  margin-top: 14px;
  font-size: 14px;
  // color: #ffffff;
}
.btnRegist {
  margin-top: 8%;
  margin-left: 48px;
  margin-right: 48px;
  width: 100%;
  height: 50px;
  color: #ffffff;
  font-size: 16px;
  background-color: #C0D3FF;
  border-radius: 4px;
  border: none;
}
.to_login{
  font-size: 14px;
  color: #4980FF;
  margin-top: 30px;
}
.protocol{
  width: 100%;
  position: absolute;
  bottom: 30px;
  left: 0px;
  font-size: 12px;
  color: #666666;
}
.pr_txt{
  font-family: PingFang-SC-Regular;
  font-size: 12px;
  color: #4980FF;
  letter-spacing: 0;
  line-height: 17px;
  text-decoration: underline;
}
.ml-16{
  margin-left: -16px;
}
.mr-16{
  margin-right: -16px;
}
</style>
